<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>H+ 后台主题UI框架 - 收件箱</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <!-- 引入公共css -->
	<#include "/inc/header.ftl"/>

</head>

<body class="gray-bg" >
<div class="wrapper wrapper-content animated fadeInRight" id="createGenBody">
    <div class="row">
        <div class="col-sm-12">
            <div class="page-title-box">
                <p class="page-title">
                    自动生成代码
                </p>
            </div>
            <div class="tabs-container">
                <div class="tab-content">
                    <div id="tab-1" class="tab-pane active">
                        <div class="panel-body">
                            <form method="get" class="form-horizontal" id="invoiceSearchForm">
                                <!-- 可供库存物资 -->
                                <div class="row">
                                    <div class="col-sm-12">
                                        <div class="ibox float-e-margins iboxBorder">
                                            <div class="ibox-content">
                                                <div class="row">
                                                    <div class="col-sm-12">
                                                        <div class="col-sm-4">
                                                            <div class="form-group">
                                                                <label class="col-sm-4 control-label">数据库:</label>
                                                                <div class="col-sm-8">
                                                                    <select id="dbList" name="dbList" class="form-control" @change="queryDbList">
                                                                        <option value="">==请选择数据库==</option>
                                                                        <#if dbList?? && dbList?size gt 0>
                                                                            <#list dbList as item>
                                                                            <option value="${item.id!''}">${item.dbName!''}</option>
                                                                            </#list>
                                                                        </#if>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-12">
                                                        <div class="col-sm-4">
                                                            <div class="form-group">
                                                                <label class="col-sm-4 control-label">模板分类:</label>
                                                                <div class="col-sm-8">
                                                                    <select id="groupList" name="groupList" class="form-control" @change="queryTemplateList">
                                                                        <option value="">==请选择模板分类==</option>
                                                                        <#if groupList?? && groupList?size gt 0>
                                                                            <#list groupList as item>
                                                                            <option value="${item.id!''}">${item.name!''}</option>
                                                                            </#list>
                                                                        </#if>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="col-sm-12">
                                                        <div class="col-sm-4">
                                                            <div class="form-group">
                                                                <label class="col-sm-4 control-label">项目名称:</label>
                                                                <div class="col-sm-8">
                                                                    <input type="text" class="form-control" id="projectName">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="col-sm-12">
                                                        <div class="col-sm-4">
                                                            <div class="form-group">
                                                                <label class="col-sm-4 control-label">包路径:</label>
                                                                <div class="col-sm-8">
                                                                    <input type="text" class="form-control" id="packagePath">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="col-sm-12">
                                                        <div class="col-sm-4">
                                                            <div class="form-group">
                                                                <label class="col-sm-4 control-label">访问路径前缀:</label>
                                                                <div class="col-sm-8">
                                                                    <input type="text" class="form-control" id="basePath">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row">


                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>

                            <div class="row">
                                <div class="col-sm-12 ibox-content">
                                    <div class="col-sm-6">
                                        <div class="ibox float-e-margins back-white">
                                            <p>
                                                数据库表列表
                                            </p>
                                            <div id="tableList">
                                                <table class="table table-striped table-hover table-bordered text-center">
                                                    <thead>
                                                    <tr>
                                                        <th width="5%">
                                                            <input type="checkbox" class="select-all-js" id="all">
                                                        </th>
                                                        <th width="50%">表名</th>
                                                        <th width="45%">中文名称</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <template v-if="tableList.length > 0">
                                                        <tr v-for="table in tableList" :id="table.tableName">
                                                            <td>
                                                                <input type="checkbox" class="select-single-js" id="13">
                                                            </td>
                                                            <td>{{ table.tableName }}</td>
                                                            <td>{{ table.chinaName }}</td>
                                                        </tr>
                                                    </template>
                                                    <template v-else>
                                                        <tr>
                                                            <td colspan="3">暂无数据</td>
                                                        </tr>
                                                    </template>

                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 animated fadeInRight">
                                        <p>
                                            模板列表
                                        </p>
                                        <div id="templateList">
                                            <table class="table table-striped table-hover table-bordered text-center">
                                                <thead>
                                                <tr>
                                                    <th width="40%">名称</th>
                                                    <th width="40%">路径</th>
                                                    <th width="15%">操作</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                    <template v-if="templateList.length > 0">
                                                        <tr v-for="template in templateList">
                                                            <td>{{ template.fileName }}</td>
                                                            <td>{{ template.path }}</td>
                                                            <td><a href="/auto/code/template/detail?id=22">预览</a></td>
                                                        </tr>
                                                    </template>
                                                    <template v-else>
                                                        <tr>
                                                            <td colspan="4">暂无数据</td>
                                                        </tr>
                                                    </template>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-6 col-sm-offset-5">
                                        <button class="btn btn-primary" type="button" @click="genCode">导出代码</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 引入公共js -->
<#include "/inc/footer.ftl"/>
<script src="/static/js/vue.min.js"></script>

<script>

        var gen = new Vue({
            el: "#createGenBody",
            data: {
                tableList: [],
                templateList:[],

            },

            methods:{
                queryDbList : function(){
                    if("" != $("#dbList").val()){
                        //发送请求获取数据库下的所有表
                        $.ajax({
                            url : '/auto/code/generation/queryTableList',
                            type : 'POST',
                            data : {
                                id : $("#dbList").val(),
                            },
                            success : function(result) {
                                gen.tableList = result.data;
                            },
                            error : function(result) {
                                parent.layer.alert("发生错误！");
                            }
                        });
                    }
                },
                queryTemplateList : function(){
                    if("" != $("#groupList").val()){
                        //发送请求获取数据库下的所有表
                        $.ajax({
                            url : '/auto/code/generation/queryTemplateList',
                            type : 'POST',
                            data : {
                                groupId : $("#groupList").val()
                            },
                            success : function(result) {
                                gen.templateList = result.data;
                            },
                            error : function(result) {
                                parent.layer.alert("发生错误！");
                            }
                        });
                    }
                },

                genCode : function () {
                    //模拟form单提交
                    var tempForm = document.createElement("form");
                    tempForm.action = "/auto/code/generation/genCode";
                    //如需打开新窗口，form的target属性要设置为'_blank'
                    tempForm.target = "_self";
                    tempForm.method = "post";
                    tempForm.style.display = "none";
                    //添加参数
                    var params = this.getParms();
                    debugger
                    for (var item in params) {
                        var opt = document.createElement("textarea");
                        opt.name = params[item].name;
                        opt.value = params[item].value;
                        tempForm.appendChild(opt);
                    }
                    document.body.appendChild(tempForm);
                    //提交数据
                    tempForm.submit();
                },
                
                getParms : function () {
                    var tables = checkbox.getCheckedboxIds("#tableList").toString();

                    var parames = new Array();
                    parames.push({ name: "groupId", value: $("#groupList").val()});
                    parames.push({ name: "dbId", value: $("#dbList").val()});
                    parames.push({ name: "tables", value: tables});
                    parames.push({ name: "projectName", value: $("#projectName").val()});
                    parames.push({ name: "packagePath", value: $("#packagePath").val()});
                    parames.push({ name: "basePath", value: $("#basePath").val()});
                    return parames;
                }
            }

        });



</script>

</body>

</html>
